<template>
	<view class="coupon">
		<u-toast ref="uToast" />
		<view class="coupon-top">
			优惠券
			<img @click="back" src="@/static/img/common_btn_return_n.png" style='width: 10px;height: 19px;' alt="">
		</view>
		<view class="keyong" >
			可领取优惠券({{list.length}})
			<view class="keyong-item" v-for='item in list' @click="get_coupon(item)">
				<b>{{item.amount}}</b><span>元</span>
				<view class="keyong-item-right">
					<view class="keyong-item-right-view1">
						充值满{{item.minPoint}}元
					</view>
					<view class="keyong-item-right-view2">
						{{item.startTime.substring(0,10)}}至{{item.endTime.substring(0,10)}}
						<!-- {{item.startTime.substring(0,10)}}至{{item.endTime.substring(0,10)}} -->
					</view>
				</view>
			</view>
		</view>
		<view class="bukeyong">
			不可使用优惠券(2)
			<view class="bukeyong-item">
				<b>8.0</b><span>折</span>
				<view class="bukeyong-item-right">
					<view class="bukeyong-item-right-view1">
						充值满499元
					</view>
					<view class="bukeyong-item-right-view2">
						2020.10.10-2020.10.10
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import amap from "@/js_sdk/amap-wx.js";
	let _this;
	export default{
		data(){
			return{
				list:[]
			}
		},
		mounted(){
			this.get_coupon_list();
		},
		created() {
			_this = this;
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		methods:{
			get_coupon(item){
				console.log(JSON.stringify({
						"couponCode": item.code,
						"couponId": item.id,
						"getType":0,
						"useStatus":0
					}));
				var self = this;
				$.ajax({
					url: Global.serverIp + 'frontend/couponHistory/save',
					data: JSON.stringify({
						"couponCode": item.code,
						"couponId": item.id,
						"getType":0,
						"useStatus":0
					}),
					xhrFields: {
						withCredentials: true
					},
					beforeSend: function(request) {
						request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('token'));
					},
					contentType: 'application/json;charset=utf-8',
					dataType: 'json',
					type: 'post',
					success: function(res) {
						if (res.code == Global.success_code) {
							
							console.log(res);
						} else {
							self.open(res.msg, false);
						}
					},
					error: function(res) {
						if (res.responseJSON.code == '040005') {
							self.reLogin();
						} else {
							self.open("请求失败", false);
						}
					}
					
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			get_coupon_list(){
				uni.request({
					url: this.$store.state.ip + 'jianeng-frontend/coupon/findPage', //仅为示例，并非真实接口地址。
					data: JSON.stringify({
						"limit": "1000",
						"page": "1"
					}),
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.list = res.data.data.list
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
			
			},
			
		}
	}
</script>

<style>
	.coupon{
		background-color: #f2f4f7;
		overflow: auto;
		width: 100%;
	}
	.coupon-top{
		font-size: 16px;
		color: #35374b;
		text-align: center;
		height: 80px;
		line-height: 100px;
		border-bottom: 1px solid #DEDFE2;
		background-color: #fff;
	}
	.coupon-top img{
		position: absolute;
		left: 0px;
		top: 26px;
		padding: 12px;
	}
	.coupon-top img:active{
	  background-color: #eee;
  }
	.keyong{
		color: #949799;
		font-size: 13px;
		margin: 20px 22px 12px 22px;
	}
	.bukeyong{
		color: #949799;
		font-size: 13px;
		margin: 20px 22px 12px 22px;
	}
	.keyong-item{
		background:url(../../static/img/coupon_bg_allow.png);
		background-size: 100% 100%;
		padding: 30px 30px 30px 30px;
		margin-top: 12px;
		overflow: auto;
	}
	.keyong-item b{
		font-size: 38px;
		color: #fe4f52;
		float: left;
	}
	.keyong-item span{
		margin-left: 5px;
		font-size: 13px;
		color: #fe4f52;
		float: left;
		margin-top: 25px;
	}
	.keyong-item-right{
		float: right;
		margin-top: 8px;
	}
	.keyong-item-right-view1{
		font-size: 17px;
		color: #35374b;
	}
	.keyong-item-right-view2{
		font-size: 12px;
		color: #949799;
	}
	.bukeyong-item{
		background:url(../../static/img/coupon_bg_notallowed.png);
		background-size: 100% 100%;
		padding: 30px 30px 30px 30px;
		margin-top: 12px;
	}
	.bukeyong-item b{
		font-size: 38px;
		color: #b3b3b3;
	}
	.bukeyong-item span{
		margin-left: 5px;
		font-size: 13px;
		color: #b3b3b3;
	}
	.bukeyong-item-right{
		float: right;
		margin-top: 8px;
	}
	.bukeyong-item-right-view1{
		font-size: 17px;
		color: #b3b3b3;
	}
	.bukeyong-item-right-view2{
		font-size: 12px;
		color: #949799;
	}
</style>
